<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>会议室管理系统</title>
<link href="${pageContext.request.contextPath}/css/main.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css"
		href="${pageContext.request.contextPath}/css/themes/icon.css">
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/jquery-1.6.min.js"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
		<style>
.td-select {
	background: #FBEC88
} /*td高亮样式*/
</style>
</head>
<body>
	<div id="select" class="easyui-panel" title="会议室预订信息"
		style="width: 100%; padding: 10px;">
		<div style="float: left; margin-right: 20px;">
			会议室楼层: <input class="easyui-combobox" name="roomFloor"
				style="width: 100px; heigth: 20px;"
				data-options="
				valueField:'valueField',
				textField:'textField',
				url:'${pageContext.request.contextPath}/RoomController/getRoomSearchCombo?type=roomFloor',
				 onSelect: function(rec){    
            		var url = '${pageContext.request.contextPath}/RoomController/getRoomSearchCombo?type=roomSize&roomFloor='+rec.valueField;    
            			$('#roomSizeComboBox').combobox('reload', url);  
            			}  
        " />
		</div>
		<div style="float: left; margin-right: 20px;">
			会议室大小: <input id="roomSizeComboBox" class="easyui-combobox"
				name="roomSize" style="width: 100px;"
				data-options="valueField:'valueField',textField:'textField',url:'${pageContext.request.contextPath}/RoomController/getRoomSearchCombo?type=roomSize'" />
			</input>
		</div>
		<div style="float: left; margin-right: 20px;">
			查询时间: <input class="easyui-datebox"></input>
		</div>
		<div style="float: left; margin-right: 20px;">
			<a href="#" class="easyui-linkbutton"
				data-options="iconCls:'icon-search'" style="width: 80px">查询</a>
		</div>
	</div>
	<br />

	<div style="float: right; margin-bottom: 10px">
		<a href="#" onclick="saveOrder();" class="easyui-linkbutton">预定</a>
	</div>

	<table id="meetingList" class="easyui-datagrid"
		title="<a href='http://www.baidu.com'>前一天</a>&nbsp;<a href='http://www.baidu.com'>后一天</a><div style='float: right; width: 300px; margin-right: 100px;'>2014-12-6</div>"
		style="width: 100%; height: 250px"
		data-options="rownumbers:true,singleSelect:true,url:'',method:'get'">
		<thead data-options="frozen:true">
			<tr>
				<th data-options="field:'meetingName',width:130">会议室名称(位置,人数)</th>
			</tr>
		</thead>
		<thead>
			<tr>
				<th data-options="field:'meetingTime1',width:75">9:00-9:30</th>
				<th data-options="field:'meetingTime2',width:75">9:30-10:00</th>
				<th data-options="field:'meetingTime3',width:75">10:00-10:30</th>
				<th data-options="field:'meetingTime4',width:75">10:30-11:00</th>
				<th data-options="field:'meetingTime5',width:75">11:00-11:30</th>
				<th data-options="field:'meetingTime6',width:75">11:30-12:00</th>
				<th data-options="field:'meetingTime7',width:75">13:30-14:00</th>
				<th data-options="field:'meetingTime8',width:75">14:00-14:30</th>
				<th data-options="field:'meetingTime9',width:75">14:30-15:00</th>
				<th data-options="field:'meetingTime10',width:75">15:00-15:30</th>
				<th data-options="field:'meetingTime11',width:75">15:30-16:00</th>
				<th data-options="field:'meetingTime12',width:75">16:00-16:30</th>
				<th data-options="field:'meetingTime13',width:75">16:30-17:00</th>
				<th data-options="field:'meetingTime14',width:75">17:00-17:30</th>
				<th data-options="field:'meetingTime15',width:75">17:30-18:00</th>
				<th data-options="field:'meetingTime16',width:75">18:00-18:30</th>
				<th data-options="field:'meetingTime17',width:75">18:30-19:00</th>
				<th data-options="field:'meetingTime18',width:75">19:00-19:30</th>
				<th data-options="field:'meetingTime19',width:75">19:30-20:00</th>
				<th data-options="field:'meetingTime20',width:75">20:00-20:30</th>
				<th data-options="field:'meetingTime21',width:75">20:30-21:00</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>四会议室(5F,10)</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>四会议室(5F,10)</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table>
</body>
</html>
<script type="text/javascript">
	$(function() {
		$('#meetingList').datagrid({
			onClickCell : function(rowIndex, field, value) {
				var me = this;
				//取消easyui的默认行选择样式，注意要延时执行，要不无法取消默认样式
				setTimeout(function() {
					$(me).datagrid('unselectRow', rowIndex)
				}, 1);
				alert(field);
			},
			onLoadSuccess : function() { //给内容table增加单元格click事件，获取单元格所在列下标进行相关DOM处理操作
				$(this).closest('div.datagrid-view').find('div.datagrid-body td').click(function() {
					var cellIndex = this.cellIndex, add = this.className.indexOf('td-select') == -1;
					if (window.single === true || typeof window.single == 'number') {//是否为单选
						if (window.single === true) {
							single = cellIndex;
						} else if (single != cellIndex) {
							$(this).closest('div.datagrid-body').find('td.td-select').removeClass('td-select');
							single = cellIndex;
						}
					}

					$(this)[add ? 'addClass' : 'removeClass']('td-select');
					$(this).closest('div.datagrid-body').find('tr').each(function() {//遍历数据行找到对应的列进行高亮操作
						$(this).find('td').eq(cellIndex)[alert()];
					});
					/*
					$(this).closest('div.datagrid-body').find('tr').each(function () {//遍历数据行找到对应的列进行高亮操作
					    $(this).find('td').eq(cellIndex)[add ? 'addClass' : 'removeClass']('td-select');
					});
					 */
				});
			}
		});
	});

	function saveOrder() {

	}
</script>